/**
* Created by QiYuBu on 2017/2/16.
* @ Description:[一句话描述功能]
*/


<style scoped>
  .item{
    line-height: 2rem;
  }

  .input{
    font-size: .75rem;/*px*/
    width: 15rem;
    line-height: 2rem;
    height: 2rem;
    background-color: #fafafa;
  }

  .footer{
    display: flex;
    position: fixed;
  }
  .footer>div{
    flex: 1;
    text-align: center;
    font-size: .9rem;/*px*/
    line-height: 2.5rem;
    color: #fff;
  }
  .footerL{
    background-color: #0094db;
  }
  .footerR{
    background-color: #ce1b1b;
  }
  .main{
    padding-top: 2.2rem;
    font-size: .75rem;/*px*/
    padding-bottom: 2.475rem;
  }
  .title{
    background-color: #efefef;
    padding: 0 .5rem;
  }
  .info{
    padding: 0 .5rem;
    /*border-bottom: 1px solid #ccc;!*no*!*/
    margin: .05rem 0;
  }
  .expensePop{
    width: 100%;
  }
  .popItem{
    font-size: .75rem;/*px*/
    line-height: 2rem;
    padding: 0 .5rem;
  }
  .icon-enter{
    line-height: 2rem;
    height: 2rem;
  }
  .icon-duihao{
    color: #0094db;
  }
  .illegalName{
    max-width: 7.5rem;
    height: 2rem;
  }
  .ruleContent {
    height:1rem;
    padding:.5rem 0 .5rem .5rem;
    background: #efefef;
    line-height:1rem;
    font-size:.75rem;
  }
  .ell {
    color:#0094db;
  }
  .infoBox {
    height:100%;
    font-size: .75rem;
    line-height: 1.5rem;
    padding: 0 .5rem;
    min-width: 12.5rem;
  }
  .people{
    text-align: left
  }
  .info2{
  }
  .go{
    text-align: left;
  }
  .back{
    text-align: left;
  }
  textarea {
    font-size: .75rem; /*px*/
    padding: .75rem 1.25rem;
    width: 94.67%;
    box-sizing: border-box;
    line-height: 1.25rem;
    border-color: #ccc;
  }
</style>
<template>
  <div class="illegaLReason">
    <headNav centerTitle="违规情况" @headBack="back"></headNav>


    <div class="main">
      <div class="ruleContent">根据贵公司的差旅规定，本次预定违反以下管控规则：</div>
      <div class="item" v-for="(item,index) in illegalUL" v-if="listShow">
        <div class="fix title" @click="showName(item)">
          <div class="l">
            {{item[0].issueInfo}}
          </div>
          <div class="r illegalName ell">
             违规人员
          </div>
        </div>
        <div class="info" @click="reasonsel(item[0],index)" v-if="item[0].needExplain">
          <input type="text" placeholder="请选择违规原因" v-model="item[0].reasonMsg" class="input" readonly/><i class="iconfont icon-enter r"></i>
        </div>
        <div class="info" @click="reasonsel(item[0],index)" v-else>
          <input type="text" placeholder="无需选择原因" v-model="item[0].reasonMsg" class="input" readonly/><i class="iconfont icon-enter r"></i>
        </div>
        <div class="info" v-if="item[0].reasonMsg == '其他'">
          <textarea type="text" placeholder="请手动输入其他违规原因" v-model.trim="item[0].otherText" class="miaoshu"></textarea>
        </div>
      </div>
    </div>




    <div class="footer fix isFixed">
      <div class="footerL" @click="back">
        上一步
      </div>
      <div @click="goBooking" class="footerR">
        确认继续
      </div>
    </div>
    <!--选择违规原因-->
    <mt-popup v-model="reasonShow" position="bottom" class = "expensePop">
      <div v-for="(pop,index) in reasonData" class="popItem" :class="{activePop:pop.selected}" @click="popActive(index,2)">
        {{pop.itemTxt}}<i class="iconfont icon-duihao r" v-show="pop.selected"></i>
      </div>
    </mt-popup>
    <alert v-if="alertShow"   @alert="remove()">
      <div class="infoBox">
        <div class="info1">
          <div class="people">{{selIllegal[3]}}人员</div>
        </div>
        <div class="info2">
          <div class="go" v-if="selIllegal[0].length>0">去程:
            <span v-for="item in selIllegal[0]" v-if="item.flightgo">{{item.userName}} </span>
          </div>
          <div class="back" v-if="selIllegal[1].length>0">返程:
            <span v-for="item in selIllegal[1]" v-if="!item.flightgo">{{item.userName}} </span>
          </div>
        </div>
      </div>
    </alert>
  </div>
</template>

<script>
  import alert1 from './alert.vue'
  import $ from 'webpack-zepto';
  import headNav from './head.vue'
  import {Popup,Indicator,Toast} from 'mint-ui'
  export default{
    data(){
      return{
        listShow:false,
        selIllegal:[[],[],[]],
        illegalUL:[],
        alertShow:false,
        msg:'hello vue',
        nameShow:false,
        reasonShow:false,
        illegalName:['张','王'],
        selectIndex:0,/*选中的是第几条违规信息*/
        reasonOther:[],
        reasonNum:0,//需要填写理由的个数
        isShow:false,
        isReason:'',
        type:'',
        peopleArr:[],
        goOrBack:'',
        goName1:[],
        goName2:[],
        goName3:[],
        goName4:[],
        backName1:[],
        backName2:[],
        backName3:[],
        backName4:[],
        isTrue1:false,
      }
    },
    components:{
      headNav,
       'alert':alert1
    },
    mounted(){
      var illegalPeoples = [];
      var backIllegalData = this.$store.state.backillegalData;
      for (var i=0 ; i<backIllegalData.length ;i++){//data
        for(var key in backIllegalData[i] ){//去或反
            for(var j=0;j< backIllegalData[i][key].illegalInfoDtoList.length;j++){//F001 F003违规项 //违规项中的列表
              var obj = backIllegalData[i][key].illegalInfoDtoList[j];//违规人员
              obj.needExplain = backIllegalData[i][key].needExplain;
              if(i==0){//去程
                obj.flightgo = true;
              }else{
                obj.flightgo = false;
              }
              illegalPeoples.push(obj);
            }
        }
      }

      for(var i=0;i<illegalPeoples.length;i++){
        for(var j=0;j<illegalPeoples.length;j++){
             if(illegalPeoples[i].issueCode == illegalPeoples[j].issueCode){
               if(illegalPeoples[i].needExplain ||illegalPeoples[j].needExplain){//一个需要理由就需要理由
                 illegalPeoples[i].needExplain = true;
                 illegalPeoples[j].needExplain = true;
               }
             }
        }
      }

      var illegalUL = [];
      var illegalCodes = [];

      for(var i=0;i<illegalPeoples.length;i++){
        illegalCodes.push(illegalPeoples[i].issueCode)
      }
      illegalCodes = Array.from(new Set(illegalCodes));


      for(var i=0;i<illegalCodes.length;i++){
        var illegalLi = [];
        for(var j=0;j<illegalPeoples.length;j++){
          if(illegalCodes[i] == illegalPeoples[j].issueCode){
            illegalPeoples[j].show = false;
            illegalLi.push(illegalPeoples[j])
          }
        }
        illegalUL.push(illegalLi);
      }


      this.illegalUL = illegalUL;
      this.listShow = true;

      for(var i=0 ; i<illegalUL.length;i++){
        if(illegalUL[i][0].needExplain){
          this.reasonNum++
        }
      }
    },
    methods:{
      reasonsel(item,index){
        this.selectIndex = index;
        this.reasonShow = true;
      },
      showName(item){
        this.selIllegal = [[],[],[]];
        this.alertShow = true;
        this.selIllegal[3] = item[0].issueInfo;
        for(var i=0 ;i<item.length;i++){
          if(item[i].flightgo){
            this.selIllegal[0].push(item[i])
          }else{
            this.selIllegal[1].push(item[i])
          }
        }
      },
      remove(){
        this.alertShow = false;
      },
      popActive(index,type){
        switch (type){
          case 2:
            for (var k = 0; k < this.reasonData.length; k++) {
              this.reasonData[k].selected = false;
            }
            this.reasonData[index].selected = true;
            this.reasonShow = false;
            this.illegalUL[this.selectIndex][0].reasonCode= this.reasonData[index].itemCode;//理由的编码
            this.illegalUL[this.selectIndex][0].reasonMsg = this.reasonData[index].itemTxt;//理由的
            break;
        }
      },
      /*点击返回车次列表*/
      back(){
        this.$store.state.skipIllegalCheck = false;
        this.$router.go(-1);
      },
      /*点击返回填单页*/
      goBooking(){
        if(this.reasonNum == 0){
          this.$store.state.skipIllegalCheck = true;
        }else{
          this.$store.state.skipIllegalCheck = false;
        }
        for(var i= 0 ; i<this.illegalUL.length ; i++){//对其他做处理
          if(this.illegalUL[i][0].reasonMsg == '其他') {
            if (!this.illegalUL[i][0].otherText) {
              this.illegalUL[i][0].reasonMsg = '其他';
              alert('其他原因不能为空');
              return
            }else{
              this.illegalUL[i][0].otherText = this.illegalUL[i][0].otherText;
            }
          }
        }

        var arrReason = [];//中转传给后台
        var selNum = 0 ; //选择了需要理由的个数

        for (let item of this.illegalUL){
          if (item[0].needExplain){
            if(!item[0].reasonCode){
              this.$store.state.skipIllegalCheck = false;
            } else{
              selNum++;
              if(selNum >= this.reasonNum){
                this.$store.state.skipIllegalCheck= true;
                for (var i=0 ; i<this.illegalUL.length ; i++){
                  var obj = {};
                  obj.issueCode = this.illegalUL[i][0].issueCode;
                  obj.otherText = this.illegalUL[i][0].otherText;
                  obj.reasonMsg = this.illegalUL[i][0].reasonMsg;
                  obj.reasonCode= this.illegalUL[i][0].reasonCode;
                  arrReason.push(obj);
                }
                break;
              }else{
                this.$store.state.skipIllegalCheck = false;
              }
            }
          }
        }
        let that = this;
          if(!that.$store.state.skipIllegalCheck){
            alert ('请补全违规原因');
          }else{
            that.$store.state.illegalReason = true;
            that.$store.state.illegalReasonListFB = arrReason.copyArr();
            that.$router.go(-1);
//            alert('可以跳')
          }
      },
    },
    computed:{
      backillegalData(){ //后台接收过来的违规人员数据
        return this.$store.state.backillegalData;
      },
      reasonData(){  //违规原因选项
        var R=this.$store.state.reasonData;
        return R
      }
    }
  }
</script>

